<template>
	<view class="page">
		<u-navbar :is-back="true" title="我的实习圈"></u-navbar>
		<!-- <h3>我的实习圈界面</h3> -->
		<view class="bgship">
			<u-avatar :src="user.avatar" size="90" mode="square" class="avatar-ship" @click="remind" ></u-avatar>
		</view>
		<view class="page-box" v-for="(item, index) in moment" :key="index">
			<view class="info-head">
				<view class="info-head-ava">
					<u-avatar :src="item.reportAvatar" size="70" mode="square"></u-avatar>
					<view class="name-time">
						<view class="name">{{ item.reportName }}</view>
						<view class="info-time">{{ item.time }}</view>
					</view>
				</view>
			</view>
			<view class="info" @click="dynamicInfo(item.id, item.momentType)">
				<view class="info-text"><rich-text :nodes="item.content"></rich-text></view>
				<view v-if="item.picture1 != null">
					<u-image height="300" width="400" :src="item.picture1" mode="aspectFit"></u-image>
				</view>
			</view>
			
			<view v-if="item.comments.length > 0">
				<view class="comment" v-for="(com, idx) in item.comments" :key="idx">
					<span class="com-name">{{ com.commentatorName }}:</span>
					{{ com.content }}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { parseTime, getNowTime } from '../../utils/nowTime.js';
export default {
	data() {
		return {
			user: {},
			moment: [],
			showInput: false,
			inputValue: [],
			focus: false,
			thumbStatus: {},
			show: false,
			confirm: false,
			payload: {} ,// 删除动态所需的参数
			isRemind:false,
			notRemind:[]
		};
	},
	async onLoad(option) {
		this.user = JSON.parse(JSON.stringify(this.$store.getters.getStorageUser));
		let remindList = await this.$u.api.messageRemindList();
		console.log('remindList ', remindList);
		this.remindMessage = remindList.rows;
		this.notRemind = this.remindMessage.filter((item)=>{
			return item.status == 0
		})
		for(let i = 0;i<this.notRemind.length;i++){
			let item = this.notRemind[i]
			let moment = {}
			if(item.type == 0) {
				moment =await this.$u.api.queryCheerMoment(item.momentId)
			}else if(item.type ==1){
				moment =await this.$u.api.queryAnonymousMoment(item.momentId)
			}
			console.log('moment',moment)
			this.moment.push(moment.rows[0])
		}
		this.addPrev(this.moment)
	},
	methods: {
		remind(){
			
		},
		addPrev(dataList) {
			dataList.forEach(item => {
				if (!item.commentatorName) {
					item.commentatorName = '匿名';
				}
				if (item.time) {
					item.time = parseTime(item.time);
				}
				if (item.picture1 && !item.picture1.includes('http')) {
					item.picture1 = this.$store.state.projectIp + item.picture1;
				}
				if (item.momentType == 1) {
					if (item.reportAvatar && !item.reportAvatar.includes('http')) {
						item.reportAvatar = this.$store.state.projectIp + item.reportAvatar;
					}
				} else if (item.momentType == 0) {
					item.reportName = '匿名';
					item.reportAvatar =
						'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1305454818,873736954&fm=26&gp=0.jpg';
					if (item.comments && item.comments.length > 0) {
						this.addPrev(item.comments);
					}
				}
			});
			return;
		},
		
	}
};
</script>

<style lang="scss">
.page {
	background-color: #f0f0f0;
}
.bgship {
	height: 400rpx;
	background-image: url(../../static/img/bgship.jpg);
	background-size: 100% 100%;
	border-radius: 10rpx;
	.avatar-ship {
		position: absolute;
		left: 2vw;
		top: 380rpx;
	}
	.remind::after{
		content: '';
		width: 20rpx;
		height: 20rpx;
		border-radius: 10rpx;
		background-color: #FF0000;
		position: absolute;
		left: 12vw;
		top: 372rpx;
	}
	.btn{
		position: absolute;
		left: 20vw;
		top: 400rpx;
		color: #fff;
	}
}
.page-box {
	width: 96vw;
	margin: 2vh 2vw;
	padding: 10rpx;
	background-color: #fff;
	border-radius: 20rpx;

	.info-head {
		// margin: 10rpx;
		// border-bottom: solid 1px #f9eeff;
		display: flex;
		align-items: center;
		justify-content: space-between;
		&-ava {
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.name-time {
			display: flex;
			flex-direction: column;
			margin-left: 20rpx;
			.name {
			}
			.info-time {
				font-size: 0.8em;
			}
		}
	}

	.info {
		// background-color: rgba(255, 253, 254, 0.8);
		.info-text {
			margin: 10rpx 0;
		}
		// border-bottom: solid 1px #f9eeff;
	}

	.info-bottom {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding: 15rpx 20rpx;
		border-bottom: solid 1px #f9e4ff;
		.thumb {
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 10rpx;
		}

		.thumbnum {
			margin: 0 0 0 5rpx;
			font-size: 5rpx;
		}
	}

	.comment {
		// border: solid 1px #007AFF;
		margin: 10rpx 0;
		.com-name {
			color: #295c9d;
			margin: 0 10rpx 0 0;
		}
	}
	.comment-input {
	}
}
.thumb-active {
	color: #007aff;
}

.receive {
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
	.title {
		font-size: 1.1em;
		padding: 4vh;
	}
	.describe {
		margin: 0 2vh 3vh 2vh;
	}
	.btn /deep/ .u-size-medium {
		padding: 0 50rpx;
		margin: 0 20rpx;
	}
}
</style>


